<template>
    <div class="goodsinfo-container">
       <!--  这是小圆点 -->
       <transition
       @before-enter="beforeEnter"
       @enter="enter"
       @after-enter="afterEnter">
            <div class="ball" v-show="ballFlag" ref="ball"></div><!-- ref是获取小球的距离的第一步 -->
       </transition>

       <!--  这是轮播图区域 -->
     <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						 <swiper :lunbotuList=" lunbotu" :isfull="false"></swiper>
					</div>
				</div>
			</div>
            <!-- 这是中间区域 -->
			<div class="mui-card">
				<div class="mui-card-header">{{goodsinfo.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">
                            市场价：<del>¥{{goodsinfo.market_price}}</del>&nbsp;&nbsp;销售价：<span class="now_price">¥{{goodsinfo.sell_price}}</span>
                        </p>
                        <p>购买数量: <numbox @getcount="getSelectedCount" 
                        :max="goodsinfo.stock_quantity"></numbox><!-- 实现购物车数量+1第四步： -->
                        <!-- 实现购物车数量+1第10步-1：库存有多少件，就能+到多少件，而不是具体数字 -->

                        </p>
                        <p>
                            <mt-button type="primary" size="small">立即购买</mt-button>
                            <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
                            
                        </p>
					</div>
				</div>
			</div>
      <!--   这是页脚区域 -->
            <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号：{{goodsinfo.goods_no}}</p>
                        <p>库存情况：{{goodsinfo.stock_quantity}}件</p>
                        <p>上架时间：{{goodsinfo.add_time |dataFormat}}</p>
					</div>
				</div>
				<div class="mui-card-footer">
                    <mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button><!-- plain是幽灵按钮 -->
                      <mt-button type="danger" size="large" plain @click="goComment(id)"> 商品评论</mt-button>
                </div>
			</div>
    </div>
    <!-- 分析：为什么轮播图那么丑？
    1，因为商品详情页面中的轮播图期望高度是100%，但是宽度是自适应
    2，经过分析得到问题的原因：首页中的轮播图和详情中的轮播图分歧点是：宽度到底是100%还是自适应？
    3，方案：我们可以定义一个属性，让使用轮播图的调用者手动指定是否为100%的宽度 -->
</template>
<script>
/* 导入轮播图组件 */
import swiper from '../subcomponenets/swiper.vue'
//导入数字选择框组件
import numbox from '../subcomponenets/goodsinfo-numberbox.vue'
export default {
    data(){
        return{
            id:this.$route.params.id,//将路由参数对象中的id挂载到data上，方便后期调用
            lunbotu:[],//轮播图的容器
            goodsinfo:{},//商品详情价格参数容器
            ballFlag:false,//true//控制小球隐藏和显示的标识符
            selectedcount:1// //实现购物车数量+1第二步：用户选中的商品数量的容器。默认numbox起码要有一件
        }
    },
    created(){
        this. getLunbotu();
        this. getGoodsinfo();
    },
    methods:{
        getLunbotu(){
           this.$http.get("http://localhost:3000/src/db/previewlist.json?id="+this.id).then(result=>{
                console.log(result);
                //先循环轮播图的数组的每一项，为item添加img属性，因为轮播图组件中，只认识item.img,不认识item.src
                result.body.forEach(item=>{
                    item.img=item.src
                })
                this.lunbotu=result.body;
        
           })},
        getGoodsinfo(){
            this.$http.get("http://localhost:3000/src/db/goodsinfo.json?id="+this.id).then(result=>{
                console.log(result);
                this.goodsinfo=result.body[0];
                
                })
        },
        goDesc(id){
            //点击使用编程式导航 跳转到图文介绍页面
            this.$router.push({name:"goodsdesc",params:{id}});
        },
        goComment(id){
            //点击跳转到评论页面
            this.$router.push({name:"goodscomment",params:{id}});
        },
    addToShopCar(){
        //添加到购物车
        this.ballFlag=!this.ballFlag;
        //{id:商品的id,count:要购买的数量,price:商品的单价,selected:false}
        //拼接出一个要保存到store中car数组里的商品信息对象
        var goodsinfo={
            id:this.id,
            count:this.selectedcount,
            price:this.goodsinfo.sell_price,
            selected:true,
            imgsrc:this.lunbotu[0].src,
            title:this.goodsinfo.title
            //imgsrc='123'
        };
        //调用store中的mutations来将商品加入到购物车
        this.$store.commit("addToCar",goodsinfo);
    },
    beforeEnter(el){
        el.style.transform="translate(0,0)";
    },
    enter(el,done){
        el.offsetWidth;

       /*  问题来了：因为我们把小球的位置写死了，但是因为不同的屏幕，和界面的不同，小球最终到达的位置不一定会到达购物车上。
        经过分析，我们只要1，得到小球和购物车上面小球的横坐标和纵坐标，2，让购物车上面小球的横坐标和纵坐标 减去 小球的横坐标和纵坐标即可。
        问题又来了：如何获取两球的横坐标和纵坐标？ */

        /* 获取小球在页面的位置 */
        const ballPosition = this.$refs.ball.getBoundingClientRect();
        //获取徽标在页面中的位置
        const badgePosition= document.getElementById('badge').getBoundingClientRect();//vue 是不建议操作dom元素的，但是一些小的调整用一下也无所谓
            //两个值相减
        const xDist=badgePosition.left - ballPosition.left;
        const yDist=badgePosition.top - ballPosition.top;
            //最后把值代替进去(${xDist}px,${yDist}px)
        el.style.transform=`translate(${xDist}px,${yDist}px)`;
         el.style.transition="all 0.5s cubic-bezier(.17,.67,.83,.67)";//esae代替cubic-bezier(.17,.67,.83,.67)也行，都是动画效果，但是2更好看
         done()
    },
    afterEnter(el){
        this.ballFlag=!this.ballFlag;
    },
    //实现购物车数量+1第一步：定义选定数量值的方法
    getSelectedCount(count){
        // //实现购物车数量+1第san步：当子组件把选中的数量传递给副组件的时候，把选中的值保存到data上
        this.selectedcount=count;
        //实现购物车数量+1第9步:
        console.log('父组件拿到的数量值为：'+this.selectedcount)
    },
        },
        components:{
            swiper,numbox
        }
    }

</script>
<style lang="scss" scoped>
.goodsinfo-container{
    background-color: pink;
    overflow: hidden;
    .now_price{
        color: red;
        font-size: 16px;
        font-weight: bold;
        
    }
    .mui-card-footer{
        display:block;
        button{
        margin: 10px 0;
        };
    }
    .ball{
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: red;
        position: absolute;//因为把盒子顶下来了，所以加个定位，子绝父香
        z-index: 99;//提高层级，小圆点就上来了
        top:412px;//top和left是经过在检查元素时，改变值慢慢调试出来的数值
        left: 79px;//
      //transform:translate(685px,417px);//在检查元素中用来调试小圆点看是否跟购物车的圆点重叠，调好了把数值放到上面业务逻辑里面 
    }
}
</style>
